<script setup>
import {ref,reactive} from 'vue'
/* 导入发送请求的axios对象 */
import request from'../utils/request'

import {useRouter} from 'vue-router'
const router = useRouter()

let registUser = reactive({
  username:"",
  userPwd:""
})
let usernameMsg=ref('')
let userPwdMsg=ref('')
let reUserPwdMsg=ref('')
let reUserPwd=ref('')
async function checkUsername(){
  let usernameReg= /^[a-zA-Z0-9]{5,10}$/
  if(!usernameReg.test(registUser.username)){
    usernameMsg.value="格式有误"
    return false
  }
  // 发送异步请求   继续校验用户名是否被占用
  let {data} = await request.post(`user/checkUsernameUsed?username=${registUser.username}`)
  if(data.code != 200){
    usernameMsg.value="用户名占用"
    return false
  }
  usernameMsg.value="可用"
  return true
}

function checkUserPwd(){
  let userPwdReg = /^[0-9]{6}$/
  if(!userPwdReg.test(registUser.userPwd)){
    userPwdMsg.value="格式有误"
    return false
  }
  userPwdMsg.value="OK"
  return true
}

function checkReUserPwd(){
  let userPwdReg = /^[0-9]{6}$/
  if(!userPwdReg.test(reUserPwd.value)){
    reUserPwdMsg.value="格式有误"
    return false
  }
  if(registUser.userPwd != reUserPwd.value){
    reUserPwdMsg.value="两次密码不一致"
    return false
  }
  reUserPwdMsg.value="OK"
  return true
}

// 注册的方法
async function regist(){
  // 校验所有的输入框是否合法
  let flag1 =await checkUsername()
  let flag2 =await checkUserPwd()
  let flag3 =await checkReUserPwd()
  if(flag1 && flag2 && flag3){
    let  {data}= await request.post("user/register",registUser)
    if(data.code === 200){
      // 注册成功跳转 登录页
      alert("注册成功,快去登录吧")
      await router.push("/login")
    }else{
      alert("抱歉,用户名被抢注了")
    }
  }else{
    alert("校验不通过,请求再次检查数据")
  }
}

function clearForm(){
  registUser.username=""
  registUser.userPwd=""
  usernameMsg.value=""
  userPwdMsg.value=""
  reUserPwd.value=""
  reUserPwdMsg.value=""

}


</script>

<template>
  <div>
    <h3 class="ht">请注册</h3>

    <table class="tab" cellspacing="0px">
      <tr class="ltr">
        <td>请输入账号</td>
        <td>
          <input class="ipt"
                 id="usernameInput"
                 type="text"
                 name="username"
                 v-model="registUser.username"
                 @blur="checkUsername()">

          <span id="usernameMsg" class="msg" v-text="usernameMsg"></span>
        </td>
      </tr>
      <tr class="ltr">
        <td>请输入密码</td>
        <td>
          <input class="ipt"
                 id="userPwdInput"
                 type="password"
                 name="userPwd"
                 v-model="registUser.userPwd"
                 @blur="checkUserPwd()">
          <span id="userPwdMsg" class="msg" v-text="userPwdMsg"></span>
        </td>
      </tr>
      <tr class="ltr">
        <td>确认密码</td>
        <td>
          <input class="ipt"
                 id="reUserPwdInput"
                 type="password"
                 v-model="reUserPwd"
                 @blur="checkReUserPwd()">
          <span id="reUserPwdMsg" class="msg" v-text="reUserPwdMsg"></span>
        </td>
      </tr>
      <tr class="ltr">
        <td colspan="2" class="buttonContainer">
          <input class="btn1" type="button" @click="regist()" value="注册">
          <input class="btn1" type="button" @click="clearForm()" value="重置">
          <router-link to="/login">
            <button class="btn1">去登录</button>
          </router-link>
        </td>
      </tr>
    </table>
  </div>
</template>
<style scoped>
.ht{
  text-align: center;
  color: cadetblue;
  font-family: 幼圆;
}
.tab{
  width: 500px;
  border: 5px solid cadetblue;
  margin: 0px auto;
  border-radius: 5px;
  font-family: 幼圆;
}
.ltr td{
  border: 1px solid  powderblue;

}
.ipt{
  border: 0px;
  width: 50%;

}
.btn1{
  border: 2px solid powderblue;
  border-radius: 4px;
  width:60px;
  background-color: antiquewhite;

}
.msg {
  color: gold;
}
.buttonContainer{
  text-align: center;
}
</style>